<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>数据统计页面</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }
    .container {
      width: 80%;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    .progress-bar {
      height: 10px;
      background-color: #1E90FF;
      display: inline-block;
    }
    .filter-section {
      overflow: auto;
      margin-bottom: 20px;
    }
    .select-box {
      float: left;
      margin-right: 15px;
    }
    .search-box {
      float: right;
    }
    .search-box button {
      margin-left: 5px;
    }
  </style>
</head>
<body>

<div class="container">

  <div class="filter-section">
    <div class="select-box">
      <label for="category">选择事件： </label>
      <select id="category">
        <option value="event1">事件1</option>
        <option value="event2">事件2</option>
      </select>
    </div>

    <div class="select-box">
      <label for="region">选择区域：</label>
      <select id="region">
        <option value="region1">区域1</option>
        <option value="region2">区域2</option>
      </select>
    </div>

    <div class="search-box">
      <label for="search-term">关键词：</label>
      <input type="text" id="search-term">
      <button>搜索</button>
    </div>
    <form action="AttributionServlet" method="GET">
      <label for="timeRange">选择时间段：</label>
      <select id="timeRange" name="timeRange">
        <option value="weekly">近一周</option>
        <option value="monthly">近一个月</option>
        <option value="yearly">近一年</option>
      </select>
      <input type="submit" value="确定">
    </form>
  </div>


  <!-- 时间段选择 -->


  <!-- 展示归因结果的容器 -->
  <div>
    <h2>${timeRange} 归因分析结果</h2>
    <p>${attributionResult}</p>
  </div>

  <table>
    <tr>
      <th>指标名称</th>
      <th>基础数值</th>
      <th>对标数值</th>
      <th>百分比</th>
    </tr>
    <tr>
      <td>指标1</td>
      <td>11,293</td>
      <td>1,123</td>
      <td><div class="progress-bar" style="width: 53%;"></div> 53.2%</td>
    </tr>
    <tr>
      <td>指标2</td>
      <td>11,293</td>
      <td>1,123</td>
      <td><div class="progress-bar" style="width: 11%;"></div> 11%</td>
    </tr>
    <!-- ... other rows ... -->
  </table>

</div>
</html>
